<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Smart 后台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/Smart_Backstage/layui/css/layui.css">
    <script src="/Smart_Backstage/layui/layui.js" charset="utf-8"></script>
    <script src="\Smart_Backstage\js\jquery-3.4.1.js"></script>

    <style type="text/css">

        .layui-body{
            background-color: #F0F0F0;
        }

        #doContainer{
            background-color: white;
            border-top: 2px solid #1E9FFF;
            margin: 20px;
            border-radius:10px;
        }

        #tableDiv{
            padding: 25px;
        }

        #daohTitle{
            padding-top: 25px;
            padding-left: 35px;
            padding-bottom: 15px;
            display: inline-block;
        }

        .selectContainer{
            margin-top: 20px;
        }
        #price{
            margin-top: 20px;
        }

    </style>

</head>

<body class="layui-layout-body">

<div class="layui-layout layui-layout-admin">

    <div class="header"></div>

    <div class="left"></div>

    <div class="layui-body">
        <!-- 内容主体区域-->
        <div id="doContainer">
                <span class="layui-breadcrumb" id="daohTitle">
                    <a href="index.html">首页</a>
                    <a href="#">邮件管理</a>
                    <a><cite>发送邮件</cite></a>
                </span>

            <div id="tableDiv">

                <form class="layui-form" id="mailForm">
                    <div class="layui-form-item">
                        <label class="layui-form-label">收件人</label>
                        <div class="layui-input-block">
                            <input type="text" name="address" required  lay-verify="email" placeholder="请输入收件人" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">标题名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">邮件内容</label>
                        <div class="layui-input-block">
                            <textarea name="message" placeholder="请输入内容" lay-verify="required" autocomplete="off" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">立即发送</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>

    <div class="footer"></div>

</div>



<script>

    layui.use(['form'], function(){
        var form = layui.form;
        var $ = layui.jquery;
        //监听提交
        form.on('submit(formDemo)', function(data){
            $("#mailForm")[0].reset();
            $.ajax({
                // 编写json格式，设置属性和值
                url: "/Smart_Backstage/mail/send",
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify(data.field),
                dataType: "json",
                type: "post",
                success: function (data) {
                    if(data == 1){
                        layer.msg('邮件发送成功！', {
                            time: 5000, //5s后自动关闭
                            btn: ['好的', '知道了']
                        });
                    }else{
                        layer.msg('邮件发送失败，请重新发送', {
                            time: 5000, //5s后自动关闭
                            btn: ['好的']
                        });
                    }
                }
            })
            return false;
        });


    });

</script>

<script>

    $(function(){
        $('.header').load('header.html');
        $('.left').load('aside.html');
        $('.footer').load('footer.html');
    })

    //JavaScript代码区域
    $("#content") .load("intoIndex",function () {

        layui.use('element', function(){
            var element = layui.element;
        });

    });
</script>


</body>
</html>